<template>
  <!--现金物品列表组件 -->
  <div class="player-account">
    <!-- 面包屑路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商城管理</el-breadcrumb-item>
      <el-breadcrumb-item>现金物品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容区 -->
    <el-card class="box-card">
      <!-- 搜索与全部区开始 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入内容"
              v-model.trim="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="getGoodsList"
            ></el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleAll">全部商品</el-button>
        </el-col>
      </el-row>
      <!-- 搜索与添加区结束 -->
      <!-- 商品列表区开始 -->
      <el-table :data="goodsList" border>
        <!-- 索引列 -->
        <el-table-column type="index" label="#"></el-table-column>
        <!-- 索引列 -->
        <el-table-column label="编号" prop="SN"></el-table-column>
        <el-table-column label="商品预览">
          <template slot-scope="props">
            <div>
              <img
                :src="path + props.row.img"
                alt=""
                onerror="javascript:this.src=''"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column
          label="商品价格（点券）"
          prop="Price"
        ></el-table-column>
        <el-table-column label="商品描述" prop="desc"></el-table-column>
        <el-table-column label="商品优先级" prop="Priority"></el-table-column>
        <el-table-column label="是否在售">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.OnSale"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="商品操作" width="140">
          <template slot-scope="props">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editGoods(props.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteGoods(props.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 商品列表区结束 -->
      <!-- 分页器开始 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageConfig.currentPage"
        :page-sizes="pageConfig.pageSizes"
        :page-size="pageConfig.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageConfig.pageTotal"
        :hide-on-single-page="false"
      >
      </el-pagination>
      <!-- 分页器结束 -->
    </el-card>

    <!-- 编辑商品的弹出层 -->
    <el-dialog title="编辑商品" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        :label-position="'right'"
        label-width="80px"
        ref="form"
      >
        <el-form-item label="商品编号">
          <el-input v-model.trim="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model.trim="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格（点券）">
          <el-input v-model.trim="form.price"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="form.desc"
            resize="none"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索内容
      searchCont: '',
      // 获取商品列表的参数对象
      queryInfo: {
        query: '' // 查询参数
      },
      // 分页器参数配置
      pageConfig: {
        pageTotal: 0, // 分页器总条数
        pageSize: 10, // 每页显示条数
        pageSizes: [10, 15, 20, 25], // 可选择的每页条数
        currentPage: 1 // 分页器当前页码
      },
      goodsList: [], // 商品数据
      path: '',
      dialogFormVisible: false,
      form: {
        name: '',
        type: [],
        desc: '',
        id: '',
        price: ''
      },
      formLabelWidth: '120px'
    };
  },
  created () {
    this.getGoodsList();
  },
  methods: {
    // 发送网络请求，获取商品列表
    async getGoodsList () {
      await this.$axios
        .get('/cashList', {
          params: {
            search: this.searchCont.trim(),
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize
          }
        })
        .then(res => {
          console.log(res);
          console.log(this.searchCont);
          // 判断是否请求成功
          if (res.status !== 0) {
            return this.$message.error('获取商品列表失败!');
          } else {
            this.goodsList = res.data; // 保存商品列表到goodsList
            console.log('haha' + this.goodsList);
            // this.total = res.toatal; // 总条数
            this.path = res.path;
            // 设置分页
            this.pageConfig.pageTotal = res.total;
            this.pageConfig.currentPage = res.pagenum;
            console.log(this.pageConfig.pageTotal);
            console.log(res);
            // 处理数据
            res.data.forEach(item => {
              if (item.OnSale === 0) {
                item.OnSale = true;
              } else {
                item.OnSale = false;
              }
            });
          }
        });
    },
    handleSizeChange (val) {
      // 切换每页条数重新获取数据
      this.pageConfig.pageSize = val;
      this.getGoodsList();
    },
    handleCurrentChange (val) {
      // 切换页码时重新获取数据
      this.pageConfig.currentPage = val;
      this.getGoodsList();
    },
    searchClear () {
      this.getGoodsList();
    },
    // 全部商品
    handleAll () {
      this.searchCont = '';
      this.getGoodsList();
    },
    // 点击编辑商品储存商品信息
    editGoods (id) {
      // 根据商品ID查找信息
      // 发起请求
      this.$axios
        .get('/cash/' + id)
        .then(res => {
          if (res.status === 0) {
            // 设置数据
            this.form.id = res.data.id;
            this.form.name = res.data.name;
            this.form.desc = res.data.desc;
            this.form.price = res.data.price;
            // 打开弹出层
            this.dialogFormVisible = true;
          } else {
            // 提示失败信息
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        });
    },
    // 保存修改
    editSubmit (form) {
      // this.dialogFormVisible = false
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$axios
            .put('/cash/' + this.form.id, {
              name: this.form.name,
              desc: this.form.desc,
              price: this.form.price
            })
            .then(res => {
              if (res.status === 0) {
                this.dialogFormVisible = false;
                // 提示成功信息
                this.$message.success(res.msg);
                // 重新刷新数据
                this.getGoodsList();
              } else {
                // 提示失败信息
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            });
        }
      });
    },
    // 删除商品
    deleteGoods (id) {
      this.$confirm('你确定要删除该商品吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete('/cash/' + id)
            .then(res => {
              if (res.status === 0) {
                // 提示成功信息
                this.$message.success(res.msg);
                // 重新刷新数据
                this.getGoodsList();
              } else {
                // 提示失败信息
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style>
.el-table-column {
  text-align: center;
}
</style>
